<template>
  <div>
    <div class="dialogue-root">
      <div class="dialogue-left">
        <sessionSelect
          v-on:session-id-change="handleSessionIdChange"
        ></sessionSelect>
      </div>
      <div class="dialogue-right">
        <AIChatCompletion :sessionId="sessionId"> </AIChatCompletion>
      </div>
    </div>
  </div>
</template>

<script setup>
import sessionSelect from "@/components/sessionSelect.vue";
import AIChatCompletion from "@/components/AIChatCompletion.vue";
import { ref } from "vue";

const sessionId = ref(0);
const handleSessionIdChange = (originSessionId) => {
  console.log("handleSessionIdChange", originSessionId);
  sessionId.value = originSessionId;
};
</script>


<style>
.dialogue-root {
  height: 100%;
  width: 100%;
  display: flex;
}
.dialogue-left {
  height: 100%;
  width: 250px;
  border-right: 1px solid #e4e7ed;
}
.dialogue-right {
  flex: 1;
}
</style>
